<template>
  <div class="container">
    <div class="map-div">
      <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;justify-content: space-between;">
        <div style="display: flex;align-items: center;height: 35px;">
          <div style="width: 10px;height: 35px;background: #0060bf;" v-show="mapTitle !=='湖南省'">
          </div>
          <i class="el-icon-map-location" style="font-size: 20px;margin-left: 10px;font-weight: bold;"
             v-show="mapTitle !=='湖南省'">{{ city }}</i>
          <img style="margin-left: 20px;
         width: 20px;
         height: 20px;
        cursor:pointer;"
               src="@/assets/返回.png"
               @click="backMap" v-show="mapTitle !=='湖南省'"/>
        </div>
      </div>
      <div style="width: 100%;height:calc(100vh - 120px);" ref="map" @contextmenu.prevent="toBack">
      </div>
    </div>
    <div class="table-div">
      <div style="flex: 1;">
        <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;font-weight: bold;"><span
              v-show="mapTitle =='湖南省'">全省</span>案件来源数量分类型统计
          </div>
          <div style="display: flex;margin-left: 10px;align-items: center;">
            <span style="margin-right: 10px;">日期</span>
            <el-date-picker
                @change="dateChange"
                style="width: 150px;margin-right: 20px;"
                v-model="currentDate"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <span style="margin-right: 5px;">案件类型</span>
            <el-select style="width: 150px;margin-left: 10px;" v-model="type" @change="change">
              <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div id="echarts1" style="height: calc(100vh - 451px); width:  100%;"></div>
      </div>
      <div style="flex: 1.3;">
        <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;font-weight: bold;"><span
              v-show="mapTitle =='湖南省'">全省</span>新增案件来源数量分市统计
          </div>
          <div style="display: flex;margin-left: 10px;align-items: center;">
            <span style="margin-right: 5px;">月份</span>
            <el-date-picker
                @change="changeMonth"
                v-model="monthShowSelect"
                type="month"
                value-format="yyyy-MM"
                format="yyyy-MM"
                placeholder="选择月">
            </el-date-picker>
            <i class="el-icon-sort" ref="sortIcon" style="margin-left: 40px;cursor:pointer;color: #272636;"
               @click="sort"></i>
          </div>
        </div>
        <div style="height: 100%;">
          <div id="echarts2" style="height: 100%; width:  100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import hunan from "@/json/湖南省/湖南省.json";
import changde from "@/json/湖南省/常德市.json";
import chenzhou from "@/json/湖南省/郴州市.json";
import hengyang from "@/json/湖南省/衡阳市.json";
import huaihua from "@/json/湖南省/怀化市.json";
import loudi from "@/json/湖南省/娄底市.json";
import shaoyang from "@/json/湖南省/邵阳市.json";
import xiangtan from "@/json/湖南省/湘潭市.json";
import xiangxizuzhizhou from "@/json/湖南省/湘西土家族苗族自治州.json";
import yiyang from "@/json/湖南省/益阳市.json";
import yongzhou from "@/json/湖南省/永州市.json";
import yueyang from "@/json/湖南省/岳阳市.json";
import zhangjiajie from "@/json/湖南省/张家界市.json";
import changsha from "@/json/湖南省/长沙市.json";
import zhuzhou from "@/json/湖南省/株洲市.json";

import XZData from "@/json/echarts_data1.json"
import MSData from "@/json/echarts_data2.json"
import XSData from "@/json/echarts_data3.json"
import user from "@/json/db/user.json";
import api from "@/utils/api";

export default {
  mounted() {
    this.addLog()
    this.allEchartsData = [...XZData.data, ...MSData.data, ...XSData.data]
    this.generateLast7Days()
    this.initMap()
    this.initCharts1_1()
    this.initCharts1_2()
  },
  data() {
    return {
      links: [],
      linkNames: [],
      myChart: null,
      myChart2: null,
      myMapChart: null,
      option: null,
      option2: null,
      mapOption: null,
      currentDate: new Date(),
      monthSelect: '2025年02月01日',
      monthShowSelect: new Date(),
      type: '全部',
      city: '湖南省',
      typeList: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '民事',
          label: '民事'
        },
        {
          value: '刑事',
          label: '刑事'
        },
        {
          value: '行政',
          label: '行政'
        },
      ],
      allEchartsData: [],
      barEchartsData: [],
      lineEchartsData: [],
      last7Days: [],
      numberCountList: [],
      startDate: '',
      endDate: '',
      cityMap: null,
      sortFlag: false,
      Ytitle: [],
      mapTitle: '湖南省'
    }
  },
  created() {
    this.cityMap = new Map([
      ['湖南省', hunan],
      ['常德市', changde],
      ['郴州市', chenzhou],
      ['衡阳市', hengyang],
      ['怀化市', huaihua],
      ['娄底市', loudi],
      ['邵阳市', shaoyang],
      ['湘潭市', xiangtan],
      ['湘西土家族苗族自治州', xiangxizuzhizhou],
      ['益阳市', yiyang],
      ['永州市', yongzhou],
      ['岳阳市', yueyang],
      ['张家界市', zhangjiajie],
      ['长沙市', changsha],
      ['株洲市', zhuzhou]
    ]);
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件信息统计'
      obj.content = '查看了【新增案件来源统计】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    sort() {
      if (this.sortFlag) {
        this.upData()
        this.$refs.sortIcon.style.color = '#272636';
      } else {
        this.downData()
        this.$refs.sortIcon.style.color = '#2454ff';
      }
      this.sortFlag = !this.sortFlag;
    },
    upData() {
      if (this.myChart2 && this.option2) {
        this.numberCountList.sort((a, b) => a.value - b.value);

        this.option2.yAxis[0].data = this.numberCountList.map(item => item.name);
        this.myChart2.setOption({
          xAxis: this.option2.xAxis,
          yAxis: this.option2.yAxis
        });
        this.option2.series[0].data = this.numberCountList.map(item => item.value);
        this.myChart2.setOption(this.option2);
      }
    },
    downData() {
      if (this.myChart2 && this.option2) {
        this.numberCountList.sort((a, b) => b.value - a.value);

        this.option2.yAxis[0].data = this.numberCountList.map(item => item.name);
        this.myChart2.setOption({
          xAxis: this.option2.xAxis,
          yAxis: this.option2.yAxis
        });
        this.option2.series[0].data = this.numberCountList.map(item => item.value);
        this.myChart2.setOption(this.option2);
      }
    },
    changeMonth(month) {
      this.monthSelect = this.formatDate(new Date(month))
      console.log(this.monthSelect)
      // const monthData = new Date(month);
      this.handleEndData()
    },
    getYTitlte() {
      const data = []
      if (this.mapTitle == '湖南省') {
        this.allEchartsData.forEach(first => {
          data.push(first.firstCity)
        })
      } else {
        this.allEchartsData.forEach(first => {
          if (first.firstCity == this.mapTitle) {
            first.organList.forEach(second => {
              data.push(second.secondCity)
            })
          }
        })
      }
      const unique = data.reduce((acc, current) => {
        // 检查累加器中是否已存在具有相同name的对象
        const exists = acc.find(item => item === current);
        // 如果不存在，则添加到累加器中
        if (!exists) {
          acc.push(current);
        }
        return acc;
      }, []);
      this.Ytitle = unique.sort();
    },
    backMap() {
      this.mapTitle = '湖南省'
      this.city = '湖南省'
      this.initMap()
      this.handleData()
      this.handleEndData()
    },
    formatDateString(dateStr) {
      // 解析日期字符串
      const year = dateStr.slice(0, 4);
      const month = dateStr.slice(5, 7);
      const day = dateStr.slice(8, 10);

      // 格式化月份和日期
      const formattedMonth = month.padStart(2, '0');
      const formattedDay = day.padStart(2, '0');

      // 返回格式化后的日期字符串
      return `${year}年${formattedMonth}月${formattedDay}日`;
    },
    formatDateJson(dateStr) {
      // 使用正则表达式来匹配年、月、日
      const match = dateStr.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);
      if (match) {
        // 使用padStart确保月和日是两位数字
        const year = match[1];
        const month = match[2].padStart(2, '0');
        const day = match[3].padStart(2, '0');
        // 重新构造字符串
        return `${year}年${month}月${day}日`;
      }
      return dateStr; // 如果不匹配，则返回原字符串
    },
    dateChange(date) {
      const startDate = new Date(date);
      const endDate = new Date(date);
      endDate.setDate(startDate.getDate() + 6); // 包括第7天

      const daysArray = [];
      let currentDate = startDate;


      while (currentDate <= endDate) {
        daysArray.push(this.formatDate(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
      }
      this.last7Days = daysArray;
      this.startDate = this.last7Days[0];
      this.endDate = this.last7Days[this.last7Days.length - 1];

      this.handleData()
    },
    change(val) {
      this.type = val
      this.handleData()
    },
    generateLast7Days() {
      const today = new Date();
      this.last7Days = [];
      for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const formattedDate = this.formatDate(date);
        this.last7Days.push(formattedDate);
      }
      this.last7Days.reverse()
      this.startDate = this.last7Days[0];
      this.endDate = this.last7Days[this.last7Days.length - 1];
      this.handleData();
      this.handleEndData();
    },
    handleEndData() {
      const searList = []
      this.numberCountList = []
      if (this.mapTitle == '湖南省') {
        this.allEchartsData.forEach(one => {
          one.organList.forEach(organ => {
            organ.numberList.forEach(number => {
              if (this.formatDateJson(number.date) >= this.monthSelect
                  && this.formatDateJson(number.date) <= this.monthSelect) {
                const obj = {}
                obj.name = one.firstCity
                obj.date = number.date
                obj.value = number.value
                searList.push(obj)
              }
            })
          })
        })
      } else {
        this.allEchartsData.filter(one => one.firstCity == this.mapTitle).forEach(one => {
          one.organList.forEach(organ => {
            const obj = {}
            obj.name = organ.secondCity
            organ.numberList.forEach(number => {
              if (this.formatDateJson(number.date) >= this.monthSelect
                  && this.formatDateJson(number.date) <= this.monthSelect) {
                obj.date = number.date
                obj.value = number.value
              }
            })
            searList.push(obj)
            console.log(obj.name)
          })
        })
      }

      this.staticEndNumber(searList)
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
      const day = date.getDate().toString().padStart(2, '0');

      return `${year}年${month}月${day}日`;
    },
    handleData() {
      this.barEchartsData = []
      this.lineEchartsData = []
      const searList = []
      switch (this.type) {
        case '全部':
          if (this.mapTitle == '湖南省') {
            this.allEchartsData.forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          } else {
            this.allEchartsData.filter(one => one.firstCity === this.mapTitle).forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          }
          break
        case '民事':
          if (this.mapTitle == '湖南省') {
            MSData.data.forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          } else {
            MSData.data.filter(one => one.firstCity === this.mapTitle).forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          }

          break
        case '刑事':
          if (this.mapTitle == '湖南省') {
            XSData.data.forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          } else {
            XSData.data.filter(one => one.firstCity === this.mapTitle).forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          }
          break
        case '行政':
          if (this.mapTitle == '湖南省') {
            XZData.data.forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          } else {
            XZData.data.filter(one => one.firstCity === this.mapTitle).forEach(one => {
              one.organList.forEach(organ => {
                organ.numberList.forEach(number => {
                  if (this.formatDateJson(number.date) >= this.startDate && this.formatDateJson(number.date) <= this.endDate) {
                    searList.push(number)
                  }
                })
              })
            })
          }
          break
      }
      this.staticNumber(searList)
      if (this.myChart && this.option) {
        this.option.xAxis[0].data = this.last7Days;
        this.myChart.setOption({
          xAxis: this.option.xAxis,
          yAxis: this.option.yAxis
        });
        this.option.series[0].data = this.barEchartsData;
        this.option.series[0].name = this.type;
        this.option.series[1].data = this.lineEchartsData;
        this.myChart.setOption(this.option);
      }
      // this.getYTitlte()
      // if (this.myChart2 && this.option2) {
      //   this.option2.yAxis[0].data = this.numberCountList.map(item => item.name);
      //   this.myChart2.setOption({
      //     xAxis: this.option2.xAxis,
      //     yAxis: this.option2.yAxis
      //   });
      //   this.option2.series[0].data = this.numberCountList.map(item => item.value);
      //   this.myChart2.setOption(this.option2);
      // }
    },
    staticEndNumber(searchList) {
      const summary = searchList.reduce((acc, item) => {
        // 检查累加器中是否已经有当前name的条目
        if (!acc[item.name]) {
          // 如果没有，初始化它
          acc[item.name] = 0;
        }
        // 将当前项目的value加到累加器中对应name的值上
        acc[item.name] += item.value;
        return acc;
      }, {});
      this.numberCountList = Object.keys(summary).reduce((uniqueArray, key) => {
        const foundItem = uniqueArray.find(item => item.name === key);
        if (!foundItem) {
          uniqueArray.push({name: key, value: summary[key]});
        }
        return uniqueArray;
      }, []);
      if (this.myChart2 && this.option2) {
        this.option2.yAxis[0].data = this.numberCountList.map(item => item.name);
        this.myChart2.setOption({
          xAxis: this.option2.xAxis,
          yAxis: this.option2.yAxis
        });
        this.option2.series[0].data = this.numberCountList.map(item => item.value);
        this.myChart2.setOption(this.option2);
      }
    },
    staticNumber(searList) {
      let barAggregated = {};
      let lineAggregated = {};
      searList.forEach(item => {
        const {date, value} = item;
        if (barAggregated[date]) {
          barAggregated[date] += value;
        } else {
          barAggregated[date] = value;
        }
      });
      searList.forEach(item => {
        const {date, value} = item;
        if (lineAggregated[date]) {
          lineAggregated[date] += value;
        } else {
          lineAggregated[date] = value;
        }
      });

      const barResultArray = Object.keys(barAggregated).sort().map(date => ({
        date,
        value: barAggregated[date]
      }));
      const lineResultArray = Object.keys(lineAggregated).sort().map(date => ({
        date,
        value: lineAggregated[date]
      }));
      this.barEchartsData = barResultArray.map(item => item.value)
      this.lineEchartsData = lineResultArray.map(item => item.value)
    },
    initCharts1_1() {
      var chartDom = document.getElementById('echarts1');
      var myChart = echarts.init(chartDom);
      this.myChart = myChart;
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.last7Days,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 20
            },
          },
        ],
        yAxis: [

          {
            type: 'value',
            name: '案件数量',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            barWidth: 50,
            name: this.type,
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.barEchartsData
          },
          {
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              show:false
            },
            data: this.lineEchartsData
          }
        ]
      };
      this.option = option;
      myChart.setOption(option);
    },
    initCharts1_2() {
      this.numberCountList.sort((a, b) => a.value - b.value);

      var chartDom = document.getElementById('echarts2');
      this.myChart2 = echarts.init(chartDom);
      this.option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: [
          {
            type: 'category',
            data: this.numberCountList.map(item => item.name),
            axisLabel: {
              interval: 0 // 强制显示所有标签
            }
          }
        ],
        series: [
          {
            type: 'bar',
            max: 1000,
            barWidth: 'auto',
            data: this.numberCountList,
            itemStyle: {
              color: '#91cc75'
            }
          }
        ]
      };
      this.myChart2.setOption(this.option2);
    },
    initMap() {
      echarts.registerMap("mapJson", {
        geoJSON: this.cityMap.get(this.mapTitle)
      });

      if (this.myMapChart) this.myMapChart.dispose();
      this.myMapChart = echarts.init(this.$refs.map);
      var mapOption = {
        visualMap: {
          show: false,
          min: 1111,
          max: 333332,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            type: 'map',
            map: 'mapJson',
            label: {
              show: true,
              textStyle: {
                color: 'white',
                fontSize: 16,
              }
            },
            zoom: this.zoom,
            data: [
              {name: "长沙市", value: 11111},
              {name: "株洲市", value: 22222},
              {name: "湘潭市", value: 33333},
              {name: "衡阳市", value: 44444},
              {name: "邵阳市", value: 55555},
              {name: "岳阳市", value: 66666},
              {name: "常德市", value: 77777},
              {name: "张家界市", value: 88888},
              {name: "益阳市", value: 99999},
              {name: "郴州市", value: 111111},
              {name: "永州市", value: 122222},
              {name: "怀化市", value: 133333},
              {name: "娄底市", value: 144444},
              {name: "湘西土家族苗族自治州", value: 155555},
              {name: "武陵区", value: 11111},
              {name: "鼎城区", value: 22222},
              {name: "安乡县", value: 33333},
              {name: "汉寿县", value: 44444},
              {name: "桃源县", value: 55555},
              {name: "临澧县", value: 66666},
              {name: "石门县", value: 77777},
              {name: "澧县", value: 88888},
              {name: "津市市", value: 99999},
              {name: "北湖区", value: 11111},
              {name: "苏仙区", value: 22222},
              {name: "桂阳县", value: 33333},
              {name: "宜章县", value: 44444},
              {name: "永兴县", value: 55555},
              {name: "嘉禾县", value: 66666},
              {name: "临武县", value: 77777},
              {name: "汝城县", value: 88888},
              {name: "桂东县", value: 99999},
              {name: "安仁县", value: 111111},
              {name: "资兴市", value: 122222},
              {name: "雁峰区", value: 11111},
              {name: "石鼓区", value: 22222},
              {name: "珠晖区", value: 33333},
              {name: "蒸湘区", value: 44444},
              {name: "南岳区", value: 55555},
              {name: "衡阳县", value: 66666},
              {name: "衡南县", value: 77777},
              {name: "衡山县", value: 88888},
              {name: "衡东县", value: 99999},
              {name: "祁东县", value: 111111},
              {name: "耒阳市", value: 122222},
              {name: "常宁市", value: 133333},
              {name: "鹤城区", value: 11111},
              {name: "中方县", value: 22222},
              {name: "洪江市", value: 33333},
              {name: "沅陵县", value: 44444},
              {name: "辰溪县", value: 55555},
              {name: "溆浦县", value: 66666},
              {name: "会同县", value: 77777},
              {name: "麻阳苗族自治县", value: 88888},
              {name: "新晃侗族自治县", value: 99999},
              {name: "芷江侗族自治县", value: 111111},
              {name: "靖州苗族侗族自治县", value: 122222},
              {name: "通道侗族自治县", value: 133333},
              {name: "娄星区", value: 11111},
              {name: "冷水江市", value: 22222},
              {name: "涟源市", value: 33333},
              {name: "双峰县", value: 44444},
              {name: "新化县", value: 55555},
              {name: "双清区", value: 11111},
              {name: "大祥区", value: 22222},
              {name: "北塔区", value: 33333},
              {name: "邵东市", value: 44444},
              {name: "新邵县", value: 55555},
              {name: "邵阳县", value: 66666},
              {name: "隆回县", value: 77777},
              {name: "洞口县", value: 88888},
              {name: "绥宁县", value: 99999},
              {name: "新宁县", value: 111111},
              {name: "城步苗族自治县", value: 122222},
              {name: "武冈市", value: 133333},
              {name: "雨湖区", value: 11111},
              {name: "岳塘区", value: 22222},
              {name: "湘潭县", value: 33333},
              {name: "湘乡市", value: 44444},
              {name: "韶山市", value: 55555},
              {name: "吉首市", value: 11111},
              {name: "泸溪县", value: 22222},
              {name: "凤凰县", value: 33333},
              {name: "花垣县", value: 44444},
              {name: "保靖县", value: 55555},
              {name: "古丈县", value: 66666},
              {name: "永顺县", value: 77777},
              {name: "龙山县", value: 88888},
              {name: "资阳区", value: 11111},
              {name: "赫山区", value: 22222},
              {name: "沅江市", value: 33333},
              {name: "桃江县", value: 44444},
              {name: "南县", value: 55555},
              {name: "安化县", value: 66666},
              {name: "零陵区", value: 11111},
              {name: "冷水滩区", value: 22222},
              {name: "祁阳市", value: 33333},
              {name: "东安县", value: 44444},
              {name: "双牌县", value: 55555},
              {name: "道县", value: 66666},
              {name: "江永县", value: 77777},
              {name: "宁远县", value: 88888},
              {name: "蓝山县", value: 99999},
              {name: "新田县", value: 111111},
              {name: "江华瑶族自治县", value: 122222},
              {name: "岳阳楼区", value: 11111},
              {name: "云溪区", value: 22222},
              {name: "君山区", value: 33333},
              {name: "汨罗市", value: 44444},
              {name: "临湘市", value: 55555},
              {name: "岳阳县", value: 66666},
              {name: "华容县", value: 77777},
              {name: "湘阴县", value: 88888},
              {name: "平江县", value: 99999},
              {name: "永定区", value: 11111},
              {name: "武陵源区", value: 22222},
              {name: "慈利县", value: 33333},
              {name: "桑植县", value: 44444},
              {name: "芙蓉区", value: 11111},
              {name: "天心区", value: 22222},
              {name: "岳麓区", value: 33333},
              {name: "开福区", value: 44444},
              {name: "雨花区", value: 55555},
              {name: "望城区", value: 66666},
              {name: "长沙县", value: 77777},
              {name: "浏阳市", value: 88888},
              {name: "宁乡市", value: 99999},
              {name: "荷塘区", value: 11111},
              {name: "芦淞区", value: 22222},
              {name: "石峰区", value: 33333},
              {name: "天元区", value: 44444},
              {name: "渌口区", value: 55555},
              {name: "攸县", value: 66666},
              {name: "茶陵县", value: 77777},
              {name: "炎陵县", value: 88888},
              {name: "醴陵市", value: 99999}

            ]
          },
        ]
      };
      this.myMapChart.setOption(mapOption);
      this.myMapChart.on("click", (params) => {
        this.mapTitle = params.name
        this.city = params.name
        this.initMap()
        this.handleData()
        this.handleEndData()
      })
    },
    toBack() {

    }
  }
};
</script>
<style scoped>
.map-div {
  flex: 1;

  /*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);*/
}

.table-div {
  flex: 2;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);*/
  display: flex;
  flex-direction: column;
}

.container {
  padding: 5px;
  width: 100%;
  height: calc(100vh - 67px);
  overflow: hidden;
  overflow-x: hidden;
  display: flex;
}


</style>